<style scoped>

</style>
<template>
    <div>
        <div class="top-title bg-white">
            <div class="top-title-text text-18 black blod">{{type}}</div>
        </div>
        <div class="page-content flex-column" style="height: calc(100% - 50px);">
            <div class="search-block bg-white p-20">
                <Form inline :label-width="90">
                    <FormItem label="名称/编码">
                        <Input v-model="search.str" class="w240" type="text" placeholder="请输入名称或编码"/>
                    </FormItem>
                    <!--<FormItem label=" " :label-width="20">-->
                        <!--<Select v-model="search.progress" class="w160"placeholder="方案" clearable>-->
                            <!--<Option value="1">已制定方案</Option>-->
                            <!--<Option value="2">未制定方案</Option>-->
                        <!--</Select>-->
                    <!--</FormItem>-->
                    <FormItem :label-width="0">
                        <Button @click="goSearch" class="m-r-10" type="primary">搜索</Button>
                        <Button @click="reset">重置</Button>
                    </FormItem>
                    <FormItem class="f-r" :label-width="0">
                        <Button @click="addItem" class="m-r-10" type="primary"><img src="assets/image/add.png">新增</Button>
                    </FormItem>
                </Form>
            </div>

            <div class="content-block bg-white p-0-20 flex-1 flex-column">

                <div id="mainContent" class="flex-1-height">

                    <div class="">
                        <Table :height="tableHeight"
                               :columns="columns"
                               :data="list"
                        >
                        </Table>
                    </div>

                </div>
                <div class="page-box">
                    <Page :total="total"
                          :current="page"
                          show-sizer show-elevator show-total
                          @on-change="onPageChange"
                          @on-page-size-change="changePageSize"
                          :page-size="pageSize"
                    />
                </div>

            </div>
        </div>

        <Modal v-model="itemModal"
               :title="itemData.id? '编辑': '新增'"
               class-name="vertical-center-modal"
               width="800"
        >
            <div class="p-l-20">
                <div class="top-title-text text-18 black blod">基础信息</div>
                <div class="p-15-0 max-h500">
                    <Form label-position="top">

                        <Row>
                            <Col span="11">
                                <FormItem label="物联名称" required>
                                    <Input v-model="itemData.wl_mc" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center"></Col>
                            <Col span="11">
                                <FormItem label="物联编号" required>
                                    <Input v-model="itemData.wl_bh" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span="11">
                                <FormItem label="所在位置" required>
                                    <Input v-model="itemData.sz_wz" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center"></Col>
                            <Col span="11">
                                <FormItem label="控制设备" required>
                                    <Input v-model="itemData.kz_sb" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span="11">
                                <FormItem label="管理员" required>
                                    <Input v-model="itemData.gly" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center"></Col>
                            <Col span="11">
                                <FormItem label="联系方式" required>
                                    <Input v-model="itemData.lx_fs" class="w240" type="text" placeholder="请输入"/>
                                </FormItem>
                            </Col>
                        </Row>

                        <FormItem label="描述">
                            <Input v-model="itemData.ms" type="textarea" maxlength="500" show-word-limit
                                   :rows="4" class="flex-1" placeholder="请输入描述内容"></Input>
                        </FormItem>
                    </Form>

                </div>
            </div>

            <div slot="footer">
                <Button @click="itemModal = false" class="m-r-10">取消</Button>
                <Button @click="confirm" type="primary">确定</Button>
            </div>
        </Modal>

    </div>
</template>

<script>

    export default {
        data() {
            return {
                type: '物联控制',

                search: {
                    str: '',
                    timeArr: [],
                },
                total: 0,
                page: 1,
                pageSize: 10,

                tableHeight: 500,
                columns: [
                    {
                        title: '物联名称',
                        key: 'wl_mc',
                    },
                    {
                        title: '物联编码',
                        key: 'wl_bh'
                    },
                    {
                        title: '所在位置',
                        key: 'sz_wz'
                    },
                    {
                        title: '控制设备',
                        key: 'kz_sb'
                    },
                    {
                        title: '管理员',
                        key: 'gly',
                        // sortable: 'custom'
                    },
                    {
                        title: '联系方式',
                        key: 'lx_fs',
                        // sortable: 'custom'
                    },
                    {
                        title: '状态',
                        key: 'statusName',
                        // sortable: 'custom'
                    },
                    {
                        title: '操作',
                        width: 200,
                        render: (h, params) => {
                            let open = h('a', {
                                class: 'red m-r-10',
                                on: {
                                    click: () => {
                                        console.log('打开', params.row);

                                        this.$Modal.confirm({
                                            title: '提示',
                                            content: '<p>确认开启吗？</p>',
                                            onOk: () => {
                                                // let postData = {
                                                //     crList: params.row.id
                                                // };
                                                //
                                                // this.util.post('/management/deleteCaseReport', postData, 'formdata').then(res => {
                                                //     if(res.status == 200) {
                                                //         this.$Message.success(res.msg);
                                                //         this.getList();
                                                //     } else {
                                                //         this.$Message.warning(res.msg)
                                                //     }
                                                // })
                                            },
                                        });
                                    }
                                }
                            }, '开启');
                            let close = h('a', {
                                class: 'red m-r-10',
                                on: {
                                    click: () => {
                                        console.log('关闭', params.row);

                                        this.$Modal.confirm({
                                            title: '提示',
                                            content: '<p>确认关闭吗？</p>',
                                            onOk: () => {
                                                // let postData = {
                                                //     crList: params.row.id
                                                // };
                                                //
                                                // this.util.post('/management/deleteCaseReport', postData, 'formdata').then(res => {
                                                //     if(res.status == 200) {
                                                //         this.$Message.success(res.msg);
                                                //         this.getList();
                                                //     } else {
                                                //         this.$Message.warning(res.msg)
                                                //     }
                                                // })
                                            },
                                        });
                                    }
                                }
                            }, '关闭');
                            let look = h('a', {
                                class: 'm-r-10',
                                on: {
                                    click: () => {
                                        console.log('查看', params.row);
                                        this.$router.push({
                                            path: `/iotManage/iotDetail?type=${this.type}&id=${params.row.id}`
                                        })
                                    }
                                }
                            }, '查看');
                            let edit = h('a', {
                                class: 'm-r-10',
                                on: {
                                    click: () => {
                                        console.log('编辑', params.row);
                                        this.editItem(params.row);
                                    }
                                }
                            }, '编辑');
                            let del = h('a', {
                                class: 'red m-r-10',
                                on: {
                                    click: () => {
                                        console.log('删除', params.row);

                                        this.$Modal.confirm({
                                            title: '提示',
                                            content: '<p>确认删除吗？</p>',
                                            onOk: () => {
                                                let postData = {
                                                    wlId: params.row.id
                                                };

                                                this.util.post('/shCloud/deleteWl', postData, 'formdata').then(res => {
                                                    if(res.status == 200) {
                                                        this.$Message.success(res.msg);
                                                        this.getList();
                                                    } else {
                                                        this.$Message.warning(res.msg)
                                                    }
                                                })
                                            },
                                        });
                                    }
                                }
                            }, '删除');

                            if(params.row.status === 'T') {
                                return h('div', [close, look, edit, del]);
                            } else {
                                return h('div', [open, look, edit, del]);
                            }

                        }
                    },
                ],
                list: [],

                itemModal: false,
                itemData: {
                    "wl_mc":"",
                    "wl_bh": "",
                    "sz_wz": "",
                    "kz_sb": "",
                    "gly": "",
                    "lx_fs": "",
                    "ms": ""
                },
            }
        },
        created() {
            this.getList();
        },
        mounted() {
            let mainContent = document.getElementById('mainContent')
            if(mainContent) {
                this.tableHeight =  mainContent.offsetHeight - 40
            }
            this.timer = setInterval(() => {
                if(mainContent) {
                    this.tableHeight =  mainContent.offsetHeight - 40
                } else {
                    mainContent = document.getElementById('mainContent')
                }
            }, 1000)
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        methods: {
            onPageChange(page) {
                this.page = page;
                this.getList();
            },
            //改变每页条数
            changePageSize(size) {
                this.pageSize = size;
                this.onPageChange(1)
            },
            goSearch() {
                this.onPageChange(1)
            },
            reset() {
                this.search = {
                    str: '',
                    timeArr: [],
                };
                this.goSearch();
            },
            getList() {
                let postData = {
                    pageSize: this.pageSize,
                    pageNum: this.page,
                    nameOrCode: this.search.str,
                };

                this.util.get('/shCloud/wlLists', postData).then(res => {
                    console.log('获取列表', JSON.parse(JSON.stringify(res)))
                    res.data && res.data.forEach(v => {
                        v.statusName = v.status === 'T' ? '已开启': '已关闭'
                    })
                    this.list = res.data || [];
                    this.total = res.total || 0;

                })
            },

            addItem() {
                this.itemData = {
                    "wl_mc":"",
                    "wl_bh": "",
                    "sz_wz": "",
                    "kz_sb": "",
                    "gly": "",
                    "lx_fs": "",
                    "ms": ""
                };
                this.itemModal = true;
            },
            editItem(itemData) {

                this.itemData = {
                    id: itemData.id,
                    "wl_mc":itemData["wl_mc"],
                    "wl_bh": itemData["wl_bh"],
                    "sz_wz": itemData["sz_wz"],
                    "kz_sb": itemData["kz_sb"],
                    "gly": itemData["gly"],
                    "lx_fs": itemData["lx_fs"],
                    "ms": itemData["ms"],
                };
                this.itemModal = true;
            },
            confirm() {

                let itemData = this.itemData;

                if(!itemData.wl_mc) {
                    this.$Message.warning('请输入物联名称');
                    return;
                }
                if(!itemData.wl_bh) {
                    this.$Message.warning('请输入物联编号');
                    return;
                }
                if(!itemData.sz_wz) {
                    this.$Message.warning('请输入所在位置');
                    return;
                }
                if(!itemData.kz_sb) {
                    this.$Message.warning('请输入控制设备');
                    return;
                }
                if(!itemData.gly) {
                    this.$Message.warning('请输入管理员');
                    return;
                }
                if(!itemData.lx_fs) {
                    this.$Message.warning('请输入联系方式');
                    return;
                }

                let postData = {
                    "wl_mc":itemData["wl_mc"],
                    "wl_bh": itemData["wl_bh"],
                    "sz_wz": itemData["sz_wz"],
                    "kz_sb": itemData["kz_sb"],
                    "gly": itemData["gly"],
                    "lx_fs": itemData["lx_fs"],
                    "ms": itemData["ms"],
                };

                let url = '/shCloud/editWl';
                if(itemData.id) {
                    postData.id = itemData.id;
                    url = '/shCloud/editWl';
                }

                this.util.post(url, postData).then(res => {
                    if(res.status == 200) {
                        this.$Message.success(res.msg);
                        this.getList();
                        this.itemModal = false;
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })

            },

        },
    }
</script>

